<template>
    <div>
        <Bread></Bread>
        <el-card>
            <el-button type="primary" @click="addCate">添加分类</el-button>
            <!-- tree树形表格 -->
            <TreeTable :data="treeList" :columns="defaultProps" :selection-type="false" :expand-type="false"
                index-text="索引" :show-row-hover="false" show-index border>
                <!-- 是否有效 -->
                <template slot="isok" slot-scope="scope">
                    <i class="el-icon-success" style="color: lightgreen" v-if="scope.row.cat_deleted === false"></i>
                </template>
                <!-- 排序 -->
                <template slot="sorts" slot-scope="scope">
                    <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
                    <el-tag type="success" v-if="scope.row.cat_level === 1">二级</el-tag>
                    <el-tag type="warning" v-if="scope.row.cat_level === 2">三级</el-tag>
                </template>
                <!-- 操作 -->
                <template slot="caozuo" slot-scope="scope">
                    <el-button type="primary" size="mini">编辑</el-button>
                    <el-button type="danger" size="mini" @click="delCate(scope.row)">删除</el-button>
                </template>
            </TreeTable>
            <!-- 对话框组件 -->
            <Dialog :myDialog="myDialog" :cate="cate" @getList="getList" :options="options" :props="props" :changedata="changedata"></Dialog>
            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryCate.pagenum" :page-sizes="[2, 3, 4, 5]" :page-size="queryCate.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import Bread from '@/components/Bread.vue'
import { cateList } from '@/utils/categoryapi'
import TreeTable from 'vue-table-with-tree-grid'
import Dialog from '@/components/cate/Dialog.vue'
export default {
    components: { Bread, TreeTable, Dialog },
    data() {
        return {
            query: {
                type: '',
                pagenum: 1,
                pagesize: 5
            },
            /* 模态框的基础设置 */
            myDialog: {
                flag: false,//是否显示
                type: '',//add or edit
                title: ''//标题
            },
            /* 分类数据 */
            cate: {
                cat_pid: '',
                cat_name: '',
                cat_level: ''
            },
            treeList: [],
            defaultProps: [
                {
                    label: "分类名称",
                    prop: "cat_name",
                },
                {
                    label: "是否有效",
                    // 表示当前列为模板列
                    type: "template",
                    // 表示当前这一列的模板名称
                    template: "isok",
                },
                {
                    label: "排序",
                    type: "template",
                    template: "sorts",
                },
                {
                    label: "操作",
                    type: "template",
                    template: "caozuo",
                },
            ],
            options:[],//一级  二级菜单数据
            props:{
                label:'cat_name',
                value:'cat_id',
                checkStrictly:true
            },
            changedata:[],
             /* 分页参数 */
             queryCate: {
                query: '',
                pagenum: 1,
                pagesize: 3
            },
            total:10,
        }
    },
    mounted() {
        this.getList();
        this.getData();
    },
    methods: {
        async getList() {
            //分类所有数据
            let res = await cateList(this.query)
            this.treeList = res.data.result;
            console.log(this.treeList)
        },
        /* 添加分类 */
        addCate() {
            // alert(111)
            (
                this.myDialog = {
                    flag: true,//是否显示
                    type: 'add',//add or edit
                    title: '添加分类'//标题
                }
            ),
                (
                    /* 分类数据 */
                    this.cate = {
                        cat_pid: '',
                        cat_name: '',
                        cat_level: ''
                    }
                )
        },
        //获取所有 一级 二级数据
        async getData() {
            let res = await cateList({type:2});
            this.options = res.data;
        },
        /* 删除 */
        delCate(del) {
            console.log(del);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await this.$http.delete(`categories/${del.cat_id}`)
                console.log(res);
                if (res.meta.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getList();
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
         /* 每页条数发生变化 */
         handleSizeChange(size) {
            this.query.pagesize = size
            this.getList()
        },
        /* 当前页数据发生改变 */
        handleCurrentChange(nowPage) {
            this.query.pagenum = nowPage
            this.getList()
        },
    }
}
</script>

<style lang="scss" scoped>

</style>